<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是louie的分享页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
    <script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
    <script src="//cdn.bootcss.com/vue/2.5.8/vue.min.js"></script>

</head>
<body>
<div class="container" id="vueApp">
    <div class="row mx-auto w-75" style="margin-top: 20px">
        <div class="col-12 text-center">
            <h3>设备信息表</h3>
        </div>
    </div>
    <div class="row mx-auto w-75" style="height: 15px"></div>
    <div class="row mx-auto w-75">
        <div class="col-6">
            <div class="btn-group">
                <button type="button" class="btn btn-outline-info btn-sm" data-toggle="modal" data-target="#myModal">新增</button>
                <button type="button" class="btn btn-outline-primary btn-sm" @click="saveRows">保存</button>
            </div>
            <button type="button" class="btn btn-outline-warning btn-sm" @click="delRows">删除</button>
        </div>
        <div class="col-6">
            <div class="input-group">
                <input type="text" class="form-control input-group-sm" placeholder="输入设备编号进行搜索">
                <span class="input-group-btn">
                        <button class="btn btn-default" type="button"><i class="fa fa-search"></i></button>
                    </span>
            </div>
        </div>
    </div>
    <div class="row mx-auto w-75" style="height: 15px"></div>
    <div class="row mx-auto w-75">
        <div class="col-12">
            <table class="table table-hover table-success">
                <thead class="thead-default">
                <tr>
                    <th><input type="checkbox"></th>
                    <th>序号</th>
                    <th>设备编号</th>
                    <th>设备名称</th>
                    <th>设备状态</th>
                    <th>采购日期</th>
                    <th>管理员</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(facility,index) in facilities">
                    <td><input type="checkbox" :value="index" v-model="checkedRows"></td>
                    <td>{{index+1}}</td>
                    <td>{{facility.code}}</td>
                    <td>{{facility.name}}</td>
                    <td>{{facility.states}}</td>
                    <td>{{facility.date}}</td>
                    <td>{{facility.admin}}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <!-- 模态框 -->
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">新增设备信息</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-3">设备编号：</div>
                        <div class="col-9">
                            <input class="form-control" placeholder="设备编号" v-model="newRow.code">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-3">设备名称：</div>
                        <div class="col-9">
                            <input class="form-control" placeholder="设备名称" v-model="newRow.name">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-3">设备状态：</div>
                        <div class="col-9">
                            <input class="form-control" placeholder="设备状态" v-model="newRow.states">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-3">采购日期：</div>
                        <div class="col-9">
                            <input class="form-control" placeholder="采购日期" v-model="newRow.date">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-3">管理员：</div>
                        <div class="col-9">
                            <input class="form-control" placeholder="管理员" v-model="newRow.admin">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-primary" data-dismiss="modal" @click="addRow">确认</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script>
    var datas = [
        {
            code: "A2017-001",
            name: "3800充电器",
            states: "正常",
            date: "2017-01-21",
            admin: "andy"
        },
        {
            code: "A2017-002",
            name: "Lenovo Type-c转接器",
            states: "正常",
            date: "2017-01-21",
            admin: "zero"
        }];

    new Vue({
        el: "#vueApp",
        data: {
            checkAll: false,
            checkedRows: [],
            facilities: datas,
            newRow:{}
        },
        methods: {
            addRow: function () {
                this.facilities.push(this.newRow);
                this.newRow = {};
            },
            saveRows:function () {//保存表格数据
                
            },
            delRows:function () {
                if (this.checkedRows.length <= 0){
                    alert("您未选择需要删除的数据");
                    return false;
                }
                if (!confirm("您确定要删除选择的数据吗？")){
                    return false;
                }

                for(var i=0;i<this.checkedRows.length;i++){
                    var checkedRowIndex = this.checkedRows[i];
                    this.facilities = $.grep(this.facilities,function (facility,j) {
                        return j != checkedRowIndex;
                    });
                }
                this.checkedRows = [];
            }
        }
    });
</script>